<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>chart demo</title>
        <link href="../qschart/mstar_qs_chart_1.3.css"  type="text/css" rel="stylesheet"/>
        <!--<link href="../css/qs_ui.css" type="text/css" rel="stylesheet"/>
        <link href="../css/qs_chart.css" type="text/css" rel="stylesheet"/>-->
        <style>
            body {
                font-size: 11px;
                font-family: tahoma;
            }
            
            input {
                font-size: 11px;
            }
            
            .inputTxt {
                width: 40px;
                border: 1px solid #ccc;
                color: #333333;
                display: inline;
                font-size: 93%;
                margin-right: 5px;
                padding: 2px 0 2px 2px;
            }
            
            .btn {
                background-color: #EBEBEB;
                border: 1px solid #ccc;
                color: #333333;
                display: inline;
                margin: 4px 5px 0 -1px;
                padding: 2px 4px;
                text-decoration: none;
                margin-right: 5px;
                width: auto;
            }
            
            .ctrtable td {
                border-right: 1px solid #999999;
                border-bottom: 1px solid #999999;
                padding: 2px 10px;
            }
            
            ul li {
                padding-left: 5px;
                height: 30px;
            }
            
            .ullihover {
                background-color: #EBEBEB;
            }
            
            .title {
                background-color: #ccc;
                font-weight: bold;
                padding: 3px;
                padding-left: 8px;
                margin-left: -15px;
                margin-top: 12px;
                margin-bottom: 2px;
                clear: both;
            }
            
            .title0 {
                margin-top: 0px;
            }
            
            .handle {
                padding-left: 15px;
                line-height: 20px;
            }
            
            .args {
                margin-left: 20px;
            }
            
            .args .args-name {
                text-decoration: underline;
                width: 50px;
                float: left;
            }
            
            .args .args-desc {
                float: left;
            }
            
            select {
                border: 1px solid #ccc;
            }
            
            .li-title {
                height: 16px;
                font-weight: bold;
                background-color: #ccc;
                padding: 4px;
            }
            
            .span-title {
                font-weight: bold;
                width: 120px;
                display: -moz-inline-box;
                display: inline-block;
                margin-left: 10px;
                color: #515151;
            }
        </style>
        <script>
            var isDebug = false
        </script>
        <script src="../lib/jquery.js" type="text/javascript">
        </script>
        <script src="../lib/jquery.json.min.js" type="text/javascript">
        </script>
        <script src="../lib/migratory-jslib.js" type="text/javascript">
        </script>
        <!--[if IE]><script type="text/javascript" src="../lib/excanvas.min.js"></script><![endif]--><!--<script src="../qschart/mstar_qs_chart_1.2.js" type="text/javascript"></script>-->
        
		<!--<script src="../js/ui/util.js" type="text/javascript">
        </script>
        <script src="../js/ui/scrollpanel.js" type="text/javascript">
        </script>
        <script src="../js/ui/tabmenu.js" type="text/javascript">
        </script>
        <script src="../js/ui/scrollpanel.js" type="text/javascript">
        </script>
        <script src="../js/com/autoCompleteBox.js" type="text/javascript">
        </script>
        <script src="../js/sys/DFmt.us.js" type="text/javascript">
        </script>
        <script src="../js/com/chartDraw.js" type="text/javascript">
        </script>
        <script src="../js/com/chartUtil.js" type="text/javascript">
        </script>
        <script src="../js/com/indicatorCalculation.js" type="text/javascript">
        </script>
        <script src="../js/com/chartDataManager.js" type="text/javascript">
        </script>
        <script src="../js/com/baseChart.js" type="text/javascript">
        </script>
        <script src="../js/com/fundChart.js" type="text/javascript">
        </script>
        <script src="../lib/mstar.flot.js" type="text/javascript">
        </script>-->
		<script src="../qschart/mstar_qs_chart_1.3.js" type="text/javascript">
        </script>
    </head>
    <body style="overflow: auto; padding: 0; margin: 0">
        <div style="margin-bottom:10px;overflow:auto">
            <div id="chart" style="position: relative;height:330px;float:left;">
            </div>
            <div id="init" style="position: relative;height:286px;float:left;background-color:#f5f5f5;border:1px solid #bbbbbb;margin-left:10px;">
                <pre>
-------------chart initial code-----------------
var culture = "en-US",region = "USA",mainTicker = "FOUSA00JJB"; 
var sw = 955, sh =356,statusConfig = { width: 760, height: 320 };
var uiconfig = {chartCtrl:"default",
            settingPanel:null,
            autoHeight:true,
			Chart:{showTimeSlider:true},
            RightMenu:true,
            MouseWheel:true,
            ZoomIn:true
                };
var dataUrl = GB_ChartDataManager.dataUrls;
dataUrl.historical = "../getStockHistoricalData.jsp?";
dataUrl.fundHistorical = "../getFundChartData.jsp?";
var ch1 = new QS_FundChartComponent(mainTicker, region, culture );
ch1.initUIConfig(uiconfig);  // user default ui configure.
ch1.Init("chart","ch1",statusConfig);   
</pre>
            </div>
        </div>
        <div style="width:59%;height:490px;background-color:#f5f5f5;border:1px solid #bbbbbb;float:left;margin-left:0.5%;overflow:auto;">
            <ul class="ctrl">
                <li class='li-title'>
                    Display
                </li>
                <li idx='1'>
                    <span class='span-title'>Chart Type:</span>
                    <select id="chartType">
                        <option value='line'>Line</option>
                        <option value='mountain'>Mountain</option>
                        <option value='dot'>Dot</option>
                        <option value='ab'>Above/Below</option>
                        <option value='growth'>% Growth</option>
                        <option value='growth10'>10k Growth</option>
                    </select>
                    <input type="button" value="Set Chart Type" onclick="setChartType()" class="btn"/>
                </li>
                <li idx='2'>
                    <span class='span-title'>Vertical Scale</span>
                    <select id="chartScale">
                        <option value='0'>liner</option>
                        <option value='1'>logarithmic</option>
                    </select>
                    <input type="button" value="Set Chart Type" onclick="setVerticalScale()" class="btn"/>
                </li>
                <li idx='3'>
                    <span class='span-title'>Compare Tickers:</span>
                    <input type="text" id="compairTxt" class="inputTxt"/>
					<input type="button" value="Add" onclick="addCompairTicker()" class="btn"/>
					<input id="select-compair" type="text"class="inputTxt"/>
					<input type="button" value="Remove Compare Ticker" onclick="removeCompairTicker()" class="btn"/>
                </li>
                <li idx='4'>
                    <span class='span-title'>Cursor Type:</span>
                    <input type="text" id="csType" class="inputTxt"/>
					<input type="button" value="Set Cursor Type" onclick="setCursorType()" class="btn"/>
                </li>
                <li idx='5'>
                    <span class='span-title'>Zoom:</span>
                    <select id="zoomType" onchange="changeZoomType()">
                        <option value="-1">select a zoom type</option>
                        <option value="3">1 Month</option>
                        <option value="4">3 Months</option>
                        <option value="5">YTD</option>
                        <option value="6">1 Year</option>
                        <option value="7">3 Years</option>
                        <option value="8">5 Years</option>
                        <option value="9">10 Years</option>
                        <option value="10">Maximum</option>
                    </select>&nbsp;
                </li>
                <li idx='49'>
                    <span class='span-title'>Set Selection Mode:</span>
                    <input type="text" id="setSelectionMode" class="inputTxt"/>
					<input type="button" value="Set Selection Mode" onclick="setSelectionMode()" class="btn"/>
                </li>
                <li idx='50'>
                    <span class='span-title'>Reset Zoom:</span>
                    <input type="button" value="Reset Zoom" onclick="resetZoom()" class="btn"/>
                </li>
                <li idx='6'>
                    <span class='span-title'>Customize Range:</span>
                    <input type="text" id="startBox" class="inputTxt"/>--
					<input type="text" id="endBox" class="inputTxt"/>
					<input type="button" value="Customize Range of Date " onclick="changeDateRange()" class="btn"/>
                </li>
                <li idx='7'>
                    <span class='span-title'>Frequency:</span>
                    <input type="text" id="fre" class="inputTxt"/>
					<input type="button" value="Set Frequency" onclick="setFrequency()" class="btn"/>(d,w,m)
                </li>
                <li idx='10'>
                    <span class='span-title'>Switch Dividend:</span>
                    <input type="text" id="dividend" class="inputTxt"/><input type="button" value="Switch Dividend" onclick="switchDividend()" class="btn"/>
                </li>
                <li class='li-title'>
                    Drawing and note
                </li>
                <li idx='38'>
                    <span class='span-title'>Trend line</span>
                    <input type="button" value="Add a trend line" onclick="javascript:ch1.beginDrawing('trendline')" class="btn"/>
					<input type="button" value="Cancel add trend line" onclick="javascript:ch1.cancelDrawing('trendline')" class="btn"/>
                </li>
                <li idx='39'>
                    <span class='span-title'>Rectangle</span>
                    <input type="button" value="Add a Rectangle" onclick="javascript:ch1.beginDrawing('rectangle')" class="btn"/>
					<input type="button" value="Cancel add rectangle" onclick="javascript:ch1.cancelDrawing('rectangle')" class="btn"/>
                </li>
                <li idx='40'>
                    <span class='span-title'>Ellipse</span>
                    <input type="button" value="Add a Ellipse" onclick="javascript:ch1.beginDrawing('ellipse')" class="btn"/>
					<input type="button" value="Cancel add ellipse " onclick="javascript:ch1.cancelDrawing('ellipse')" class="btn"/>
                </li>
				<li idx='52'>
                    <span class='span-title'>Level Line</span>
                    <input type="button" value="Add a level line" onclick="javascript:ch1.beginDrawing('levelline')" class="btn"/>
                    <input type="button" value="Cancel add level line" onclick="javascript:ch1.cancelDrawing('levelline')" class="btn"/>
                </li>
                <li idx='53'>
                    <span class='span-title'>Fibonacci Retracement Levels</span>
                    <input type="button" value="Add a FR Levels" onclick="javascript:ch1.beginDrawing('fibonacci')" class="btn"/>
                    <input type="button" value="Cancel add FR Levels" onclick="javascript:ch1.cancelDrawing('fibonacci')" class="btn"/>
                </li>
                <li idx='41'>
                    <span class='span-title'>Note</span>
                    <input type="button" value="Add a Note" onclick="javascript:ch1.beginDrawing('note')" class="btn"/>
					<input type="button" value="Cancel add note" onclick="javascript:ch1.cancelDrawing('note')" class="btn"/>
                </li>
                <li class='li-title'>
                    Indicators
                </li>
                <li idx='12'>
                    <span class='span-title'>SMA</span>Period of line1:<input type="text" id="sma1" class="inputTxt"/> line2:<input type="text" id="sma2" class="inputTxt"/> line3:<input type="text" id="sma3" class="inputTxt"/><input type="button" value="Add SMA" onclick="javascript:ch1.addIndicators('SMA',document.getElementById('sma1').value,document.getElementById('sma2').value,document.getElementById('sma3').value);" class="btn" />SMA:<input type="text" id="rsma1" class="inputTxt"/><input type="button" value="Remove SMA" onclick="javascript:ch1.removeIndicators('SMA',document.getElementById('rsma1').value);" class="btn"/>
                </li>
                <li idx='14'>
                    <span class='span-title'>EMA</span>Period of line1:<input type="text" id="ema1" class="inputTxt"/> line2:<input type="text" id="ema2" class="inputTxt"/> line3:<input type="text" id="ema3" class="inputTxt"/><input type="button" value="add EMA" onclick="javascript:ch1.addIndicators('EMA',document.getElementById('ema1').value,document.getElementById('ema2').value,document.getElementById('ema3').value);" class="btn"/>Period of EMA:<input type="text" id="rema1" class="inputTxt"/><input type="button" value="remove" onclick="javascript:ch1.removeIndicators('EMA',document.getElementById('rema1').value);" class="btn"/>
                </li>
				<li idx='51'>
                    <span class='span-title'>WMA</span>Period:<input type="text" id="wma" class="inputTxt"/>
                    <input type="button" value="add WMA" onclick="javascript:ch1.addIndicators('WMA',document.getElementById('wma').value);" class="btn"/>
                    <input type="button" value="remove WMA" onclick="javascript:ch1.removeIndicators('WMA');" class="btn"/>
                </li>
                <li idx='15'>
                    <span class='span-title'>BBands</span>Period:<input type="text" id="bbandsP" class="inputTxt"/> Deviation:<input type="text" id="bbandsD" class="inputTxt"/><input type="button" value="add BBands" onclick="javascript:ch1.addIndicators('BBands',document.getElementById('bbandsP').value,document.getElementById('bbandsD').value);" class="btn"/><input type="button" value="remove BBands" onclick="javascript:ch1.removeIndicators('BBands');" class="btn"/>
                </li>
            <li idx='17'>
                <span class='span-title'>MACD</span>Slow Period:<input type="text" id="macdP1" class="inputTxt"/> fast Period:<input type="text" id="macdP2" class="inputTxt"/> signal Period:<input type="text" id="macdP3" class="inputTxt"/><input type="button" value="add MACD" onclick="javascript:ch1.addIndicators('MACD',document.getElementById('macdP1').value,document.getElementById('macdP2').value,document.getElementById('macdP3').value);" class="btn"/><input type="button" value="remove MACD" onclick="javascript:ch1.removeIndicators('MACD');" class="btn"/>
            </li>
            <li idx='18'>
                <span class='span-title'>ROC</span>Period:<input type="text" id="rocP" class="inputTxt"/><input type="button" value="add ROC" onclick="javascript:ch1.addIndicators('ROC',document.getElementById('rocP').value);" class="btn"/><input type="button" value="remove ROC" onclick="javascript:ch1.removeIndicators('ROC');" class="btn"/>
            </li>
            <li idx='19'>
                <span class='span-title'>RSI</span>
                Period:<input type="text" id="rsiP" class="inputTxt"/><input type="button" value="add RSI" onclick="javascript:ch1.addIndicators('RSI',document.getElementById('rsiP').value);" class="btn"/><input type="button" value="remove RSI" onclick="javascript:ch1.removeIndicators('RSI');" class="btn"/>
            </li>
            <li idx='25'>
                <span class='span-title'>Momentum</span>
                Period:<input type="text" id="momp" class="inputTxt"/><input type="button" value="Add Momentum" onclick="javascript:ch1.addIndicators('Momentum',document.getElementById('momp').value);" class="btn"/><input type="button" value="remove Momentum" onclick="javascript:ch1.removeIndicators('Momentum');" class="btn"/>
            </li>
            </li>
            <li idx='24'>
                <span class='span-title'>MAE</span>
                Period:<input type="text" id="maep" class="inputTxt"/>Band Width:<input type="text" id="maebw" class="inputTxt"/><input type="button" value="Add MAE" onclick="javascript:ch1.addIndicators('MAE',document.getElementById('maep').value,document.getElementById('maebw').value);" class="btn"/><input type="button" value="remove MAE" onclick="javascript:ch1.removeIndicators('MAE');" class="btn"/>
            </li>
        </li>
        </li>
        <li idx=''>
            <span class='span-title'></span>
        </li>
    </ul>
    </div>
    <div id="desc" style="width:38%;height:490px;background-color:#f5f5f5;border:1px solid #bbbbbb;float:left;margin-left:0.5%;">
    </div>
    <script>
        var debug = true; /// it will get data api in dev server.
        var culture = "en-US";
        var region = "USA";
        var mainTicker = "FOUSA00JJB";  // FARAX
        var sw = 955, sh = 356;
        var statusConfig = {
            width: 760,
            height: 320
        };
        var uiconfig = {
            chartCtrl:"default",
	        settingPanel:null,
	        autoHeight:true,
			Chart:{showTimeSlider:true},
	        RightMenu:true,
	        MouseWheel:true,
	        ZoomIn:true
        };
        // GB_ChartDataManager.dataUrls.intraday = "../quote.jsp?";
        GB_ChartDataManager.dataUrls.historical = "../getStockHistoricalData.jsp?";
        // GB_ChartDataManager.dataUrls.fundamental = "../getFundamentalData.jsp?";
        //GB_ChartDataManager.dataUrls.minutelyIntraday = "../getMinutelyIntradayData.jsp?";
        GB_ChartDataManager.dataUrls.fundHistorical = "../getFundChartData.jsp?";
        
        var ch1 = new QS_FundChartComponent(mainTicker, region, culture);
        ch1.initUIConfig(uiconfig); // user default ui configure.
        ch1.Init("chart", "ch1", statusConfig)
        //"1":{desc:"",meth:"",args:[{name:"",desc:""}],eg:""}
        //"1":{desc:"",meth:[{name:"",args:[{name:"",desc:""}]}],eg:""}
        var descArr = {
            "1": {
                desc: "Change the type of chart",
                meth: [{
                    name: "setChartType (type)",
                    args: [{
                        name: "type",
                        desc: "it is a string type.(line: line chart, mountain: mountain chart, dot: dot chart,gowth:growth chart, growth10:10K growth chart,ab:above/below chart)."
                    }]
                }],
                eg: "ch1.setChartType ('line');ch1.setChartType ('mountain');ch1.setChartType ('growth');"
            },
            "2": {
                desc: "Change the type of scale",
                meth: [{
                    name: "switchScaleType(type)",
                    args: [{
                        name: "type",
                        desc: "it is a integer.(0: Linear ,1: Logarithmic;)"
                    }]
                }],
                eg: "ch1.switchScaleType(0)<br/>ch1.switchScaleType(1)"
            },
            "3": {
                desc: "Add compare tickers",
                meth: [{
                    name: "addCompairTickers(tickers)",
                    args: [{
                        name: "tickers",
                        desc: "the unique symbol for a securities. Its format is concat exchange name and ticker name with a colon. (Such as: XNYS: IBM). It can input multi-tickers which spited by comma. (XNAS:MSFT,XNYS:IBM)"
                    }]
                }, {
                    name: "removeCompairTicker (tickers)",
                    args: [{
                        name: "tickers",
                        desc: "the unique symbol for a securities. Its format is concat exchange name and ticker name with a colon. (Such as: XNYS: IBM)."
                    }]
                }],
                eg: "ch1.addCompairTickers(XNYS:IBM) <br/> ch1.addCompairTickers(XNAS:MSFT,XNYS:IBM)."
            },
            "4": {
                desc: "Change the style of cursor.",
                meth: [{
                    name: "setCursorType (type)",
                    args: [{
                        name: "type",
                        desc: "it is a integer.(0:Track ball ,1: Crosshair; 3: Off.)"
                    }]
                }],
                eg: "ch1.setCursorType (0);"
            },
            "5": {
                desc: "Change the zoom type.",
                meth: [{
                    name: "changeRange(type)",
                    args: [{
                        name: "type",
                        desc: "it is a integer.(3: one month, 4: three months,5:YTD,6: one year, 7:three years, 8:five years, 9: ten years. 10: maximum."
                    }]
                }],
                eg: "ch1.changeRange(1)<br/>ch1.changeRange(2);"
            },
            "49": {
                desc: "Change the selection mode",
                meth: [{
                    name: "setSelectionMode(type)",
                    args: [{
                        name: "type",
                        desc: "'pan' or 'zoomin'"
                    }]
                }],
                eg: "ch1.setSelectionMode('pan');ch1.setSelectionMode('zoomin');"
            },
            "50": {
                desc: "Reset the zoom in",
                meth: [{
                    name: "resetZoom()",
                    args: []
                }],
                eg: "ch1.resetZoom();"
            },
            "6": {
                desc: "Customize range of date.",
                meth: [{
                    name: "changeDatePeriod (st,ed)",
                    args: [{
                        name: "st",
                        desc: "the start date .(its format is yyyy-MM-dd or yyyy-M-d )"
                    }, {
                        name: "et",
                        desc: "the end date .(its format is yyyy-MM-dd or yyyy-M-d )"
                    }]
                }],
                eg: "ch1.changeDatePeriod('2004-1-3','2009-11-9')."
            },
            "7": {
                desc: "Change the type of data frequency.",
                meth: [{
                    name: "setFrequency (type)",
                    args: [{
                        name: "type",
                        desc: " it is a string type.(d: daily, w: weekly, m: monthly)."
                    }]
                }],
                eg: "ch1.setFrequency('d');<br/>ch1.setFrequency('w');<br/>ch1.setFrequency('m');"
            },
            "10": {
                desc: "Switch the visibility of dividend's icon in price chart.",
                meth: [{
                    name: "switchEvents ('dividend',isShow)",
                    args: [{
                        name: "isShow",
                        desc: "it is a integer.(1: show dividend, 0: hide dividend).."
                    }]
                }],
                eg: "ch1.switchEvents ('dividend',0);"
            },
            "12": {
                desc: "Add price simple move average <br/>Remove price simple move average indicator",
                meth: [{
                    name: "addIndicators ('SMA',Line1,Line2,Line3)",
                    args: [{
                        name: "line1",
                        desc: "the period of first line of SMA lines (int) ."
                    }, {
                        name: "line2",
                        desc: "the period of first line of SMA lines (int) ."
                    }, {
                        name: "line3",
                        desc: "the period of first line of SMA lines (int) ."
                    }]
                }, {
                    name: "removeIndicators ('SMA',period)",
                    args: [{
                        name: "period",
                        desc: "the period of first line of  SMA lines (option)"
                    }]
                }],
                eg: "ch1.removeIndicators('EMA',50);<br/>ch1.removeIndicators('EMA',10);<br/>ch1.removeIndicators('EMA',20);ch1.removeIndicators('EMA',50);<br/>ch1.removeIndicators('EMA',10);<br/>ch1.removeIndicators('EMA',20);<br/>ch1.removeIndicators('EMA'); "
            },
              
            "14": {
                desc: "Add price exponential move average indicator(EMA)<br/>Remove price exponential move average indicator(EMA)",
                meth: [{
                    name: "addIndicators ('EMA',Line1,Line2,Line3)",
                    args: [{
                        name: "Line1",
                        desc: "the period of first line of  EMA lines (int)."
                    }, {
                        name: "Line2",
                        desc: "the period of second  line of  EMA lines (int)."
                    }, {
                        name: "Line3",
                        desc: "the period of third line of  EMA lines (int)."
                    }]
                }, {
                    name: "removeIndicators ('EMA',Period)",
                    args: [{
                        name: "Period",
                        desc: "the period of first line of EMA lines (option)"
                    }]
                }],
                eg: "ch1.addIndicators('EMA',50,10,20);<br/>ch1.addIndicators('EMA',50,null,20);<br/>ch1.addIndicators('EMA',null,10,null);<br/>ch1.removeIndicators('EMA',50);<br/>ch1.removeIndicators('EMA',10);<br/>ch1.removeIndicators('EMA',20);<br/>ch1.removeIndicators('EMA');  // remove all line of EMA"
            },
            "51": {
                desc: "Add weighted move average indicator<br/>Remove weighted move average indicator",
                meth: [{
                    name: "addIndicators ('WMA',Period)",
                    args: [{
                        name: "Period",
                        desc: "the period of WMA line (int). "
                    }]
                }, {
                    name: "removeIndicators ('WMA')",
                    args: [{
                        name: "",
                        desc: "the period of SMAV line (int). "
                    }]
                }],
                eg: "ch1.addIndicators('WMA',15);<br/>ch1.removeIndicators ('WMA')"
            },
            "15": {
                desc: "Add Bollinger Bands indicator<br/>Remove Bollinger Bands indicator",
                meth: [{
                    name: "addIndicators ('BBands',Period,Dev)",
                    args: [{
                        name: "Period",
                        desc: "the period of the BBands.(int)"
                    }, {
                        name: "Dev",
                        desc: " the deviation of the BBands (int)"
                    }]
                }, {
                    name: "removeIndicators ('BBands')",
                    args: [{
                        name: "",
                        desc: ""
                    }]
                }],
                eg: "ch1.addIndicators('BBands',14,2);<br/>ch1.removeIndicators('BBands');"
            },
            
            "17": {
                desc: "Add Moving Average Convergence/Divergence   indicator<br/>Remove Moving Average Convergence/Divergence   indicator",
                meth: [{
                    name: "addIndicators ('MACD', parameter1, parameter2, parameter3)",
                    args: [{
                        name: "parameter1",
                        desc: "the slow period of the MACD (int)."
                    }, {
                        name: "parameter2",
                        desc: "the fast period of the MACD (int)."
                    }, {
                        name: "parameter3",
                        desc: "the signal period of the MACD (int)."
                    }]
                }, {
                    name: "removeIndicators ('MACD')",
                    args: [{
                        name: "",
                        desc: ""
                    }]
                }],
                eg: "ch1.addIndicators('MACD',26,12,9);<br/>ch1.removeIndicators('MACD');"
            },
            "18": {
                desc: "Add Rate Of Change  indicator<br/>Remove Rate Of Change  indicator",
                meth: [{
                    name: "addIndicators ('ROC',Period)",
                    args: [{
                        name: "Period",
                        desc: "the period of ROC (int). "
                    }]
                }, {
                    name: "removeIndicators ('ROC')",
                    args: [{
                        name: "",
                        desc: ""
                    }]
                }],
                eg: "ch1.addIndicators('ROC',12);<br/>ch1.removeIndicators('ROC');"
            },
            
            "19": {
                desc: "Add Relative Strength Index   indicator<br/>Remove Relative Strength Index   indicator",
                meth: [{
                    name: "addIndicators ('RSI',Period)",
                    args: [{
                        name: "Period",
                        desc: "the period of RSI (int). "
                    }]
                }, {
                    name: "removeIndicators ('RSI')",
                    args: [{
                        name: "",
                        desc: ""
                    }]
                }],
                eg: "ch1.addIndicators('RSI',14);<br/>ch1.removeIndicators('RSI');"
            },
                
            "24": {
                desc: "Add MA Envelope indicator<br/>Remove MA Envelope indicator",
                meth: [{
                    name: "addIndicators ('MAE',Period,BandWidth)",
                    args: [{
                        name: "Period",
                        desc: "the period of MAE (int)."
                    }, {
                        name: "BandWidth",
                        desc: "the width of band(int)"
                    }]
                }, {
                    name: "removeIndicators ('MAE')",
                    args: [{
                        name: "",
                        desc: ""
                    }]
                }],
                eg: "ch1.addIndicators('MAE',14,2);<br/>ch1.removeIndicators('MAE ');"
            },
            "25": {
                desc: "Add Momentum indicator<br/>Remove Momentum indicator",
                meth: [{
                    name: "addIndicators ('Momentum',Period)",
                    args: [{
                        name: "Period",
                        desc: "the period of momentum (int)."
                    }]
                }, {
                    name: "removeIndicators ('Momentum')",
                    args: [{
                        name: "",
                        desc: ""
                    }]
                }],
                eg: "ch1.the period of momentum (int).<br/>ch1.removeIndicators('Momentum ');"
            },
            "38": {
                desc: "Add a trend line",
                meth: [{
                    name: "beginDrawing(type)",
                    args: [{
                        name: "type",
                        desc: "the type of drawing"
                    }]
                }, {
                    name: "cancelDrawing(type)",
                    args: [{
                        name: "type",
                        desc: "the type of drawing"
                    }]
                }],
                eg: "ch1.beginDrawing('trendline')<br/>ch1.cancelDrawing('trendline')"
            },
            "39": {
                desc: "Add a rectangle",
                meth: [{
                    name: "beginDrawing(type)",
                    args: [{
                        name: "type",
                        desc: "the type of drawing"
                    }]
                }, {
                    name: "cancelDrawing(type)",
                    args: [{
                        name: "type",
                        desc: "the type of drawing"
                    }]
                }],
                eg: "ch1.beginDrawing('rectangle')<br/>ch1.cancelDrawing('rectangle')"
            },
            "40": {
                desc: "Add a ellipse",
                meth: [{
                    name: "beginDrawing(type)",
                    args: [{
                        name: "type",
                        desc: "the type of drawing"
                    }]
                }, {
                    name: "cancelDrawing(type)",
                    args: [{
                        name: "type",
                        desc: "the type of drawing"
                    }]
                }],
                eg: "ch1.beginDrawing('ellipse')<br/>ch1.cancelDrawing('ellipse')"
            },
			"52": {
                desc: "Add a level line",
                meth: [{
                    name: "beginDrawing(type)",
                    args: [{
                        name: "type",
                        desc: "the type of drawing"
                    }]
                }, {
                    name: "cancelDrawing(type)",
                    args: [{
                        name: "type",
                        desc: "the type of drawing"
                    }]
                }],
                eg: "ch1.beginDrawing('levelline')<br/>ch1.cancelDrawing('levelline')"
            },
            "53": {
                desc: "Add a fibonacci retracement levels",
                meth: [{
                    name: "beginDrawing(type)",
                    args: [{
                        name: "type",
                        desc: "the type of drawing"
                    }]
                }, {
                    name: "cancelDrawing(type)",
                    args: [{
                        name: "type",
                        desc: "the type of drawing"
                    }]
                }],
                eg: "ch1.beginDrawing('fibonacci')<br/>ch1.cancelDrawing('fibonacci')"
            },
            "41": {
                desc: "Add a note",
                meth: [{
                    name: "beginDrawing(type)",
                    args: [{
                        name: "type",
                        desc: "the type of drawing"
                    }]
                }, {
                    name: "cancelDrawing(type)",
                    args: [{
                        name: "type",
                        desc: "the type of drawing"
                    }]
                }],
                eg: "ch1.beginDrawing('note')<br/>ch1.cancelDrawing('note')"
            }  
        }
        //"1":{desc:"",meth:[{name:"",args:[{name:"",desc:""}]}],eg:""}
        window.onload = function(){
            var s1 = "", s2 = "", temp = null;
            for (var s in descArr) {
                temp = descArr[s];
                s2 = "";
                for (var j = 0; j < temp.meth.length; j++) {
                    s2 += temp.meth[j].name;
                    for (var i = 0; i < temp.meth[j].args.length; i++) {
                        if (temp.meth[j].args[i].name == null || temp.meth[j].args[i].name == "") {
                            s2 += "<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Not need more parameter.";
                            continue;
                        }
                        s2 += "<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>" + temp.meth[j].args[i].name + "</u>: " + temp.meth[j].args[i].desc;
                    }
                    if (j < temp.meth.length - 1) {
                        s2 += "<br/>";
                    }
                }
                s1 += "<div id='d-" + s + "' class='handle'><div class='title title0'>Description</div>" + descArr[s].desc + "<div  class='title'>Methods</div>" + s2 + "<div  class='title'>Example</div>" + descArr[s].eg + "</div>";
            }
            $("#desc").append(s1);
            $(".handle").hide();
            $("ul.ctrl li").not(".li-title").hover(function(){
                //$(this).addClass("ullihover");
            }, function(){
                //$(this).removeClass("ullihover");
            }).click(function(){
                $(".handle").hide();
                $("ul.ctrl li").removeClass("ullihover");
                $(this).addClass("ullihover");
                $("#d-" + $(this).attr("idx")).show();
            });
            
        }
        function addCompairTicker(){
            if (ch1 != null) {
                var ticker = document.getElementById("compairTxt").value;
                if (ticker != "") {
                    ch1.addCompairTickers(ticker);
                }
            }
        }
        
        function removeCompairTicker(){
            if (ch1 != null) {
                var ticker = document.getElementById("select-compair").value;
                if (ticker != "") {
                    ch1.removeCompairTicker(ticker);
                }
            }
        }
        
        function changeZoomType(){
            if (ch1 != null) {
                var num = document.getElementById("zoomType").options[document.getElementById("zoomType").selectedIndex].value;
                if (num != "-1") {
                    ch1.changeRange(num);
                }
            }
        }
        
        function changeDateRange(){
            if (ch1 != null) {
                var st = document.getElementById("startBox").value;
                var ed = document.getElementById("endBox").value;
                if (st != "" && ed != "") {
                    ch1.changeDatePeriod(st, ed);
                }
            }
        }
        
        function setCursorType(){
            if (ch1 != null) {
                var st = parseInt(document.getElementById("csType").value);
                if (!isNaN(st) && st > -1 && st < 4) {
                    ch1.setCursorType(st);
                }
            }
        }
        
        function setFrequency(){
            if (ch1 != null) {
                var st = document.getElementById("fre").value;
                ch1.setFrequency(st);
            }
        }
        
        function switchVolumeChart(){
            if (ch1 != null) {
                var st = parseInt(document.getElementById("switchVol").value);
                if (!isNaN(st) && (st == 0 || st == 1)) {
                    ch1.switchVolumeChart(st);
                }
            }
        }
        
        function switchIIV(){
            if (ch1 != null) {
                var st = parseInt(document.getElementById("switchIIV").value);
                if ((st == 0 || st == 1)) {
                    ch1.switchIIV(st);
                }
            }
        }
        
        function setChartType(){
            if (ch1 != null) {
                var st = document.getElementById("chartType").value;
                //if(st == "lines" || st == "ohlc" || st == "candle") {
                ch1.setChartType(st);
                // }
            }
        }
        
        function switchDividend(){
            if (ch1 != null) {
                var st = parseInt(document.getElementById("dividend").value);
                if (st == 0 || st == 1) {
                    ch1.switchEvents("dividend", st);
                }
            }
        }
        
        function switchSplits(){
            if (ch1 != null) {
                var st = parseInt(document.getElementById("splits").value);
                if (st == 0 || st == 1) {
                    ch1.switchEvents("splits", st);
                }
            }
        }
        
        function switchEarnings(){
            if (ch1 != null) {
                var st = parseInt(document.getElementById("earnings").value);
                if (st == 0 || st == 1) {
                    ch1.switchEvents("earnings", st);
                }
            }
        }
        
        function setVerticalScale(){
            var ty = document.getElementById("chartScale").value;
            ch1.switchScaleType(ty);
        }
        
        function setSelectionMode(){
            var ty = document.getElementById("setSelectionMode").value;
            ch1.setSelectionMode(ty);
        }
        
        function resetZoom(){
            ch1.resetZoom();
        }
    </script>
</body>
</html>
